<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>银行卡修改</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/layer/layer.js"></script>

	<style type="text/css">
		* {
			margin: 0rem;
			padding: 0rem;
			text-decoration: none;
			list-style: none;

		}

		html,
		body {
			background-color: #fff;
			width: 100%;
			height: 100%;
			/*font-size:  100rem;*/
			font-size: calc(100vw / 7.5);
			font-family: "microsoft yahei";
		}

		/*头部*/

		.wrapper .header {
			display: flex;
			width: 100%;
			height: 0.88rem;
			background: #809fba;
		}

		.wrapper .header div {
			height: 100%;
			font-size: 0.30rem;
			text-align: center;
			line-height: 0.88rem;
			color: #fff;
		}

		.con {
			flex: 8;
		}

		.arrow img {
			width: 0.41rem;
			height: 0.3rem;
			display: inline-block;
		}

		.dot img {
			width: 0.41rem;
			height: 0.09rem;
			display: inline-block;
			margin-bottom: 3px;
		}

		.arrow {
			flex: 1;
			/* background: url("../img/arrow.png") no-repeat center; */
			background-size: contain;
		}

		.dot {
			flex: 1;
		}

		/*内容*/

		.content {
			width: 100%;
			position: relative;
			min-height: 10.8rem;
		}

		.content form {
			width: 100%;
		}

		.content form .info {
			box-sizing: border-box;
			height: 1rem;
			line-height: 1rem;
			font-size: 0.28rem;
			width: 96%;
			margin-left: 3%;
			color: #9a9a9a;
			border-color: #fff;
			border-bottom: 1px solid #e9f0f0;
		}

		.content form .sub {
			position: absolute;
			bottom: 0.8rem;
			left: 0.64rem;
			width: 6.25rem;
			height: 0.9rem;
			background: #7f9eba;
			color: #fff;
		}
	</style>
</head>

<body>
	<script>
		$(function () {
			$("#wrapper").load("../header.html")

		})
		setTimeout(function () {
			$("#wrapper").find(".con").html("银行卡修改").end().find(".dot img").css("display", "none");
			$(".arrow").on("tap", function () {
				window.location.href = "zhifuxinxi.html";
			})
		}, 200)
		setTimeout(function () {
			$("#wrapper").find(".con").html("银行卡修改").end().find(".dot img").css("display", "none");
			$(".arrow").on("tap", function () {
				window.location.href = "zhifuxinxi.html";
			})
		}, 2000)
	</script>

	<div class="wrapper" id="wrapper"></div>
	<div class="content">
		<form action="#" method="post">
			<input type="text" name="nicheng" class="info" id="info" value="" placeholder="填写新的银行卡号码" />
			<input type="text" name="nicheng" class="info" id="bank_card_name" value="" placeholder="填写姓名" />
			<input type="text" name="nicheng" class="info" id="bank_card_address" value="" placeholder="填写开户行" />

			<input type="button" class="sub" id="sub" value="确认">
		</form>
	</div>




	<script src="../js/mui.min.js"></script>
	<script>
		if(localStorage.bank_card){
			$("#info").val(localStorage.bank_card)
		}
		if(localStorage.bank_card_name){
			$("#bank_card_name").val(localStorage.bank_card_name)
		}
		if(localStorage.bank_card_address){
			$("#bank_card_address").val(localStorage.bank_card_address)
		}
		$("#sub").on("click", function () {
			if ($("#info").val() && $("#bank_card_name").val() && $("#bank_card_address").val()) {
				var bank_card_num = $("#info").val();
				var bank_card_name = $("#bank_card_name").val();
				var bank_card_address = $("#bank_card_address").val();
			
				$.ajax({
					type: "POST",
					url: `${localStorage.top}api/UserCenter/changeBankInfo`,
					data: {
						"TOKEN": `${localStorage.token}`,
						"bank_card_num": `${bank_card_num}`,
						"bank_card_name": `${bank_card_name}`,
						"bank_card_address": `${bank_card_address}`
					},
					success: successed,
					error: function () {}
				})
			}else{
				layer.msg("请输入正确的个人信息")
			}
		})

		function successed(data) {
			console.log(data)
			if (data.code ==localStorage.erro) {
				layer.msg(data.msg)
			}else{
				localStorage.bank_card_name = $("#bank_card_name").val();;
				localStorage.bank_card = $("#info").val();
				localStorage.bank_card_address =  $("#bank_card_address").val();
				layer.msg(data.msg)
				setTimeout(function(){
				$(".arrow").trigger("tap")					
				},1500)
			}
		}
	</script>
</body>

</html>